<template>
  <div class="search">
    <Card>
      <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form"
        @keydown.enter.native="handleSearch">
        <Form-item label="商品名称" prop="goodsName">
          <Input type="text" v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 200px" />
        </Form-item>
        <Form-item label="商品编号" prop="id">
          <Input type="text" v-model="searchForm.id" placeholder="请输入商品编号" clearable style="width: 200px" />
        </Form-item>
        <Form-item label="状态" prop="status">
          <Select v-model="searchForm.marketEnable" placeholder="请选择" clearable style="width: 200px">
            <Option value="UPPER">上架</Option>
            <Option value="DOWN">下架</Option>
          </Select>
        </Form-item>
        <Form-item label="商品类型" prop="status">
          <Select v-model="searchForm.goodsType" placeholder="请选择" clearable style="width: 200px">
            <Option value="PHYSICAL_GOODS">实物商品</Option>
            <Option value="VIRTUAL_GOODS">虚拟商品</Option>
          </Select>
        </Form-item>
        <Form-item label="是否推荐" prop="recommend">
          <Select v-model="searchForm.recommend" placeholder="请选择" clearable style="width: 200px">
            <Option value="">全部</Option>
            <Option :value="1">推荐</Option>
            <Option :value="0">不推荐</Option>
          </Select>
        </Form-item>
        <Form-item label="审核状态" prop="authFlag">
          <Select v-model="searchForm.authFlag" placeholder="请选择" clearable style="width: 200px">
            <Option value="TOBEAUDITED">待审核</Option>
            <Option value="PASS">审核通过</Option>
            <Option value="REFUSE"> 审核通过</Option>
          </Select>
        </Form-item>
        <Form-item label="销量排序" prop="sortSales">
          <Select v-model="searchForm.sortSales" placeholder="请选择" clearable style="width: 200px">
            <Option value="1">正序</Option>
            <Option value="0">倒序</Option>
          </Select>
        </Form-item>
        <Button @click="handleSearch" class="search-btn" type="primary" icon="ios-search">搜索</Button>
      </Form>
      <Row class="operation">
        <Button @click="pullAll">批量下架</Button>
      </Row>
      <Table :loading="loading" @on-selection-change="handleSelectRow()" border :columns="columns" :data="data"
        ref="table" class="mt_10">
        <!-- 商品栏目格式化 -->
        <template slot="goodsSlot" slot-scope="{ row }">
          <div style="margin: 5px 0px; height: 80px; display: flex">
            <div style="">
              <img :src="row.goodsGalleryList[0]" style="height: 60px; margin-top: 1px; width: 60px" />
            </div>
            <div style="margin-left: 13px">
              <div class="div-zoom">
                <a>{{ row.goodsName }}</a>
              </div>
            </div>
          </div>
        </template>
      </Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
          @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50, 100]" size="small" show-total
          show-elevator show-sizer></Page>
      </Row>
    </Card>
    <Modal title="下架操作" v-model="modalVisible" :mask-closable="false" :width="500">
      <Form ref="underForm" :model="underForm" :label-width="100">
        <FormItem label="下架原因" prop="reason">
          <Input v-model="underForm.reason" clearable style="width: 100%" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="modalVisible = false">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="lower">提交</Button>
      </div>
    </Modal>
    <Modal title="推荐操作" v-model="recommendModalVisible" :mask-closable="false" :width="500">
      <Form ref="recommendForm" :model="recommendForm" :label-width="100">
        <FormItem label="推荐排名" prop="recommendRanking">
          <Input v-model="recommendForm.recommendRanking" clearable style="width: 80%" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="recommendCancel">取消</Button>
        <Button type="primary" :loading="recommendSubmitLoading" @click="recommendSubmit">提交</Button>
      </div>
    </Modal>
    <Modal title="商品排序" v-model="sortModalVisible" :mask-closable="false" :width="500">
      <Form ref="sortForm" :model="sortForm" :label-width="100">
        <FormItem label="商品排序" prop="sortRanking">
          <Input v-model="sortForm.sort" clearable style="width: 80%" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="sortCancel">取消</Button>
        <Button type="primary" :loading="sortSubmitLoading" @click="sortSubmit">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import {
    getGoodsListData,
    upGoods,
    lowGoods,
    updateRecommendGoods,
    updateSortGoods,
  } from "@/api/goods";
  import vueQr from "vue-qr";
  export default {
    components: {
      "vue-qr": vueQr,
    },
    name: "goods",
    data() {
      return {
        id: "", //要操作的id
        loading: true, // 表单加载状态
        modalVisible: false, // 添加或编辑显示
        recommendModalVisible: false, //添加推荐显示弹窗
        sortModalVisible: false, //添加推荐显示弹窗
        recommendForm: {
          goodsId: "", //商品id
          recommend: true,
          recommendRanking: "", //推荐等级
        },
        sortForm: {
          goodsId: "", //商品id
          sort: 0
        },
        searchForm: {
          pageNumber: 1, // 当前页数
          pageSize: 10, // 页面大小
          recommend: "",
          authFlag: "", // 审核状态
          sortSales: '', // 销量排序
        },
        underForm: {
          // 下架原因
          reason: "",
        },
        submitLoading: false, // 添加或编辑提交状态
        sortSubmitLoading: false, // 添加推荐按钮加载中状态
        recommendSubmitLoading: false, //添加商品排名按钮加载中状态
        columns: [{
            type: "selection",
            width: 60,
            align: "center",
          },
          {
            title: "商品名称",
            key: "goodsName",
            minWidth: 180,
            slot: "goodsSlot",
          },
          {
            title: "商品编号",
            key: "id",
            minWidth: 150,
            tooltip: true,
          },
          {
            title: "创建时间",
            key: "createTime",
            minWidth: 150,
            tooltip: true,
          },
          {
            title: "销量",
            key: "monthSales",
            width: 80,
            align: "center"
          },
          {
            title: "评分",
            key: "score",
            width: 80,
            align: "center"
          },
          {
            title: "价格",
            key: "price",
            width: 130,
            render: (h, params) => {
              return h(
                "div",
                this.$options.filters.unitPrice(params.row.price, "焕贝")
              );
            },
          },
          {
            title: "上传来源",
            key: "origin",
            width: 130,
            render: (h, params) => {
              if (params.row.origin === "app") {
                return h(
                  "Tag", {
                    props: {
                      color: "green",
                    },
                  },
                  "移动端"
                );
              } else {
                return h(
                  "Tag", {
                    props: {
                      color: "volcano",
                    },
                  },
                  "pc端"
                );
              }
            },
          },
          {
            title: "商品类型",
            key: "goodsType",
            width: 130,
            render: (h, params) => {
              if (params.row.goodsType === "PHYSICAL_GOODS") {
                return h(
                  "Tag", {
                    props: {
                      color: "green",
                    },
                  },
                  "实物商品"
                );
              } else if (params.row.goodsType === "VIRTUAL_GOODS") {
                return h(
                  "Tag", {
                    props: {
                      color: "volcano",
                    },
                  },
                  "虚拟商品"
                );
              } else {
                return h(
                  "Tag", {
                    props: {
                      color: "geekblue",
                    },
                  },
                  "电子卡券"
                );
              }
            },
          },
          {
            title: "商品排名",
            key: "sort",
            align: "left",
            width: 120
          },
          {
            title: "状态",
            key: "marketEnable",
            width: 100,
            render: (h, params) => {
              if (params.row.marketEnable == "DOWN") {
                return h(
                  "Tag", {
                    props: {
                      color: "volcano",
                    },
                  },
                  "下架"
                );
              } else if (params.row.marketEnable == "UPPER") {
                return h(
                  "Tag", {
                    props: {
                      color: "green",
                    },
                  },
                  "上架"
                );
              }
            },
          },
          {
            title: "审核状态",
            key: "authFlag",
            width: 130,
            render: (h, params) => {
              if (params.row.authFlag == "TOBEAUDITED") {
                return h(
                  "Tag", {
                    props: {
                      color: "volcano",
                    },
                  },
                  "待审核"
                );
              } else if (params.row.authFlag == "FIRSTTRIAL") {
                return h(
                  "Tag", {
                    props: {
                      color: "volcano",
                    },
                  },
                  "待初审"
                );
              } else if (params.row.authFlag == "PASS") {
                return h(
                  "Tag", {
                    props: {
                      color: "green",
                    },
                  },
                  "通过"
                );
              } else if (params.row.authFlag == "REFUSE") {
                return [
                  h("Tag", {
                    props: {
                      color: "red"
                    }
                  }, "审核拒绝"),
                  h("div", {

                  }, params.row.authMessage)
                ];
              }
            },
          },
          {
            title: "推荐排名",
            key: "recommendRanking",
            align: "left",
            width: 120,
          },
          {
            title: "店铺名称",
            key: "storeName",
            minWidth: 100,
            tooltip: true,
          },
          {
            title: "店铺联系方式",
            key: "storePhone",
            minWidth: 100,
            tooltip: true,
          },
          {
            title: "操作",
            key: "action",
            align: "center",
            fixed: "right",
            width: 220,
            render: (h, params) => {
              if (params.row.authFlag == "TOBEAUDITED" || params.row.authFlag == "FIRSTTRIAL") {
                return h("div", [
                  h(
                    "Button", {
                      props: {
                        size: "small",
                      },
                      on: {
                        click: () => {
                          this.showDetail(params.row);
                        },
                      },
                    },
                    "查看"
                  ),
                ]);
              } else if (params.row.marketEnable == "DOWN") {
                return h("div", [
                  h(
                    "Button", {
                      props: {
                        type: "info",
                        size: "small",
                      },
                      style: {
                        marginRight: "5px",
                      },
                      on: {
                        click: () => {
                          this.upper(params.row);
                        },
                      },
                    },
                    "上架"
                  ),
                  h(
                    "Button", {
                      props: {
                        size: "small",
                      },
                      on: {
                        click: () => {
                          this.showDetail(params.row);
                        },
                      },
                    },
                    "查看"
                  ),
                ]);
              } else {
                return h("div", [
                  h(
                    "Button", {
                      props: {
                        type: "warning",
                        size: "small",
                      },
                      style: {
                        margin: "5px",
                      },
                      on: {
                        click: () => {
                          this.handleSort(params.row);
                        },
                      },
                    },
                    "商品排名"
                  ),
                  h(
                    "Button", {
                      props: {
                        type: "error",
                        size: "small",
                      },
                      style: {
                        marginRight: "5px",
                      },
                      on: {
                        click: () => {
                          this.edit(params.row);
                        },
                      },
                    },
                    "下架"
                  ),
                  h(
                    "Button", {
                      props: {
                        type: "info",
                        size: "small",
                      },
                      style: {
                        marginRight: "5px",
                        display: params.row.recommend ? "none" : "inline-block",
                      },
                      on: {
                        click: () => {
                          this.handleRecommend(params.row);
                        },
                      },
                    },
                    "好品推荐"
                  ),
                  h(
                    "Button", {
                      props: {
                        type: "info",
                        size: "small",
                      },
                      style: {
                        marginRight: "5px",
                        display: params.row.recommend ? "inline-block" : "none",
                      },
                      on: {
                        click: () => {
                          this.handleCancelRecommend(params.row);
                        },
                      },
                    },
                    "取消好品推荐"
                  ),
                  h(
                    "Button", {
                      props: {
                        size: "small",
                      },
                      on: {
                        click: () => {
                          this.showDetail(params.row);
                        },
                      },
                    },
                    "查看"
                  ),
                ]);
              }
            },
          },
        ],
        data: [], // 表单数据
        total: 0, // 表单数据总数
        pullMoreArr: [], //批量下架
      };
    },
    methods: {
      // 推荐提交事件
      recommendSubmit() {
        this.recommendSubmitLoading = true;
        updateRecommendGoods(this.recommendForm).then((res) => {
          this.recommendSubmitLoading = false;
          if (res && res.success) {
            this.$Message.success("推荐成功！");
            this.recommendCancel();
            this.getDataList();
          } else {
            this.$Message.warning(res.message);
          }
        });
      },
      // 取消推荐
      handleCancelRecommend(row) {
        this.$Modal.confirm({
          title: "确认要取消推荐",
          content: "确认要取消推荐 " + row.goodsName + " 吗?",
          loading: true,
          onOk: () => {
            updateRecommendGoods({
              goodsId: row.id, //商品id
              recommend: false,
              recommendRanking: 0, //推荐等级
            }).then((res) => {
              this.$Modal.remove();
              if (res && res.success) {
                this.$Message.success("取消推荐成功！");
                this.recommendCancel();
                this.getDataList();
              } else {
                this.$Message.warning(res.message);
              }
            });
          },
        });
      },
      //添加推荐弹窗取消事件
      recommendCancel() {
        this.recommendForm = {
          goodsId: "", //商品id
          recommend: true,
          recommendRanking: "", //推荐等级
        };
        this.$refs.recommendForm.resetFields();
        this.recommendModalVisible = false;
      },

      // 推荐
      handleRecommend(row) {
        this.recommendForm.goodsId = row.id;
        this.recommendModalVisible = true;
      },
      // 商品排序提交事件
      sortSubmit() {
        this.sortSubmitLoading = true;
        if (/^[0-9]+$/.test(this.sortForm.sort)) {
          updateSortGoods(this.sortForm).then((res) => {
            this.sortSubmitLoading = false;
            if (res && res.success) {
              this.$Message.success("商品排名推荐成功");
              this.sortCancel();
              this.getDataList();
            } else {
              this.$Message.warning(res.message);
            }
          });
        } else {
          this.sortSubmitLoading = false;
          this.$Message.warning("商品排名格式不正确");
        }

      },
      //添加商品排序弹窗取消事件
      sortCancel() {
        this.sortForm = {
          goodsId: "", //商品id
          sort: 0
        };
        this.$refs.sortForm.resetFields();
        this.sortModalVisible = false;
      },
      // 商品排序
      handleSort(row) {
        this.sortForm.goodsId = row.id;
        this.sortModalVisible = true;
      },
      // table多选值
      handleSelectRow() {
        let that = this;
        let arr = that.$refs.table.getSelection();
        console.log(arr);
        that.pullMoreArr = arr;
      },
      // 批量下架
      pullAll() {
        let that = this;
        let arr = [];
        that.pullMoreArr.map((item) => {
          arr.push(item.id);
        });
        let arrData = arr.toString();
        if (that.pullMoreArr.length > 0) {
          that.modalVisible = true;
          this.id = arrData;
        } else {
          this.$Message.warning("请选择要下架的商品");
        }
      },
      // 初始化数据,
      init() {
        this.getDataList();
      },
      // 分页 改变页码
      changePage(v) {
        this.searchForm.pageNumber = v;
        this.getDataList();
      },
      // 分页 改变页数
      changePageSize(v) {
        this.searchForm.pageSize = v;
        this.getDataList();
      },
      // 搜索
      handleSearch() {
        this.searchForm.pageNumber = 1;
        this.searchForm.pageSize = 10;
        this.getDataList();
      },
      // 获取数据
      getDataList() {
        this.loading = true;
        if (this.searchForm.sortSales === '' || this.searchForm.sortSales === undefined) {
          this.searchForm.sort = "create_time"
        } else {
          delete this.searchForm.sort
        }
        getGoodsListData(this.searchForm).then((res) => {
          this.loading = false;
          if (res.records) {
            this.data = res.records;
            this.total = res.total;
          }
        });
      },
      // 编辑
      edit(v) {
        this.id = v.id;
        if (v.underMessage != "{}") {
          this.underForm.reason = v.underMessage;
        }
        this.modalVisible = true;
      },
      // 下架
      lower() {
        lowGoods(this.id, this.underForm).then((res) => {
          this.$Modal.remove();
          if (res.success) {
            this.$Message.success("操作成功");
            this.modalVisible = false;
            this.getDataList();
          }
        });
      },
      // 商家
      upper(v) {
        this.$Modal.confirm({
          title: "确认上架",
          content: "您确认要上架 " + v.goodsName + " ?",
          loading: true,
          onOk: () => {
            upGoods(v.id).then((res) => {
              this.$Modal.remove();
              if (res.success) {
                this.$Message.success("上架成功");
                this.getDataList();
              }
            });
          },
        });
      },

      //查看商品详情
      showDetail(v) {
        let id = v.id;
        this.$router.push({
          name: "goods-detail",
          query: {
            id: id,
          },
        });
      },
    },
    mounted() {
      this.init();
    },
  };
</script>
<style type="text/css" scoped="scss">
  .operation {
    padding-top: 10px;
  }
</style>
